<template>
  <div class="root">
      <div class="content">
        <!-- <div class="content"> -->
        <div class="left">{{ props.RoomInfo.mainDepartment }}</div>
        <el-divider direction="vertical" style="height: auto;"/>
        <div class="right">
          <div v-for="(item,index) in props.RoomInfo.subDepartmentList" :key="index"
          @click="Goto(item.subDepartment,item.sid)" class="row">
            {{ item.subDepartment }}({{ item.sid }})
          </div>
        </div>
      </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';

const props=defineProps({
  RoomInfo:Object,
  hospital:String
})

const $router=useRouter()
// 跳转对应科室
const Goto=(subDepartment,sid)=>{
  $router.push({
    path:'department',
    query:{
      name:subDepartment,
      sid:sid,
      hospital:props.hospital
    }
  })
}
</script>

<style lang="scss" scoped>
.root{
  // height: auto;
  margin-bottom: 20px;
  // width: 1920px;
  min-width: 1800px;
  .content{
    // width: 1920px;
    min-width: 1800px;
    display: flex;
    background-color: #fff;
    .left{
      min-width: 220px;
      font-size: 36px;
      line-height: 300px;
      text-align: center;
    }
    .right{
      // width: 1428px;
      color: #7194bc;
      font-size: 20px;
      margin-left: 140px;
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      .row{
          width: 160px;
          height: 60px;
          margin-right: 150px;
          span:hover{
          color: #744ae2;
          cursor: pointer;
        }
      }
      .row:hover{
        color: #744ae2;
        cursor: pointer;
      }
    }
  }
}
</style>
